// flex布局
@mixin flex($justify: space-between, $align: center, $direction: row) {
  align-items: $align;
  display: flex;
  flex-direction: $direction;
  flex-wrap: nowrap;
  justify-content: $justify;
}

// 按钮
@mixin btn ($bg: #448ACA, $txt-color: #ffffff, $width: 100%, $fontSize: 14px) {
  background: $bg;
  border-radius: 5px;
  color: $txt-color;
  font-size: $fontSize;
  padding: 0.5em 0;
  text-align: center;
  width: $width;
  &:hover {
    background: #559bdb;
  }
}

// 单行显示省略号
@mixin singleline-ellipsis () {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行显示省略号
@mixin multiline-ellipsis ($count: 2) {
  display: box;
  -webkit-line-clamp: $count;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}

// 渐变色文字
@mixin linear-gradient-text ($params...) {
  background: linear-gradient($params);
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@mixin fixed-background ($image) {
  &::before {
    background: transparent $image no-repeat center 0;
    background-size: cover;
    content: ' ';
    height: 100%;
    left: 0;
    position: fixed; // 代替 background-attachment: fixed，解决移动端不兼容的问题
    top: 0;
    width: 100%;
    // background-attachment: fixed; // 不再使用，而是使用 position: fixed; 代替
    // will-change: transform; // 创建新的渲染层
    z-index: -1;
  }
}
